<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>

	<body>
		<form>
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="name" id="name"></td> <!-- 用户名输入框 -->
					<td><span id="error-msg"></span></td> <!-- 用于显示错误消息的元素 -->
				</tr>
			</table>
		</form>
						<!-- 219971311胡少康 -->
		<script>
			var nameinput = document.querySelector("#name"); // 获取用户名输入框元素
			var errorMsg = document.querySelector("#error-msg"); // 获取错误消息元素

			nameinput.addEventListener("blur", function() { // 当用户名输入框失去焦点时触发事件处理函数
				var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
				var url = "https://mock.apifox.cn/m1/2801421-0-default/name"; // 模拟API的URL
				url += "?username=" + nameinput.value;

				xhr.open("GET", url, true); // 设置异步GET请求
				xhr.send(); // 发送请求
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) {
						var result = xhr.responseText;

						if (result == "1") {
							errorMsg.innerHTML = "用户名已存在"; // 更新错误消息元素的内容
						} else {
							errorMsg.innerHTML = "用户名不存在"; // 更新错误消息元素的内容
						}
					}
				};
			});
		</script>
	</body>

</html>
